<template>
	<div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts';
import resize from '@/components/mixin/resize'
export default {
	mixins: [resize],
	computed: {
	},
	props: {
		className: {
			type: String,
			default: 'chart',
		},
		width: {
			type: String,
			default: '100%',
		},
		height: {
			type: String,
			default: '100%',
		},
		autoResize: {
			type: Boolean,
			default: true,
		},
		chartData: {
			type: Object,
			default: () => { }
		}
	},
	data() {
		return {
			chart: null
		}
	},
	watch: {
		chartData: {
			deep: true,
			handler(val) {
				this.setOptions(val)
			},
		},
	},
	created() {
	},
	mounted() {
		this.$nextTick(() => {
			this.initChart()
		})
	},
	beforeDestroy() {
		if (!this.chart) {
			return
		}
		this.chart.dispose()
		this.chart = null
	},
	methods: {
		fontSize(res) {
			let docEl = document.documentElement,
				clientWidth =
					window.innerWidth ||
					document.documentElement.clientWidth ||
					document.body.clientWidth;
			if (!clientWidth) return;
			// 此处的 1920 为设计稿的宽度
			let fontSize = clientWidth / 1920;
			return res * fontSize;
		},
		initChart() {
			this.chart = echarts.init(this.$el);
			this.setOptions(this.chartData)
		},
		setOptions({ legend, xAxis, series, color,  unit } = {}) {
			let colorData = []
			let seriesData = []
			for (let i = 0; i < series.length; i++) {
				seriesData.push({
					name: legend[i],
					type: 'line',
					smooth: true,
					showSymbol: false,
					data: series[i]
				})
			}
			let option = {
				color: color,
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					},
					borderColor: 'rgba(95,171,253,0.2)',
					confine: true,
					backgroundColor: '#0c2631', // 背景
					padding: [4, 5], //内边距
					textStyle: {
						color: '#C6F1F8',
						fontWeight: '400',
						fontSize: this.fontSize(14),
					},
				},
				grid: {
					left: this.fontSize(10),
					right: this.fontSize(10),
					bottom: this.fontSize(20),
					top: this.fontSize(100),
					containLabel: true
				},
				legend: {
					data: legend,
                    left:'center',
					right: this.fontSize(8),
					top: this.fontSize(8),
					icon: 'roundRect',
					textStyle: {
						color: '#CEE8F8',
						fontWeight: '400',
						fontSize: this.fontSize(14),
					},
					itemWidth: this.fontSize(8),
					itemHeight: this.fontSize(8),
				},
				xAxis: {
					type: 'category',
					data: xAxis,
					axisLine: {
						show: true,
						lineStyle: {
							color: '#3F4D4E',
						}
					},
					axisLabel: {
						inside: false,
						color: '#C6F1F8',
						fontWeight: '400',
						fontSize: this.fontSize(14),
						// formatter: function(params) {
						// 	var newParamsName = '' // 最终拼接成的字符串
						// 	var paramsNameNumber = params.length // 实际标签的个数
						// 	var provideNumber = 5 // 每行能显示的字的个数
						// 	var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
						// 	/**
						// 	 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
						// 	 */
						// 	// 条件等同于rowNumber>1
						// 	if (paramsNameNumber > provideNumber) {
						// 		/** 循环每一行,p表示行 */
						// 		for (var p = 0; p < rowNumber; p++) {
						// 			var tempStr = '' // 表示每一次截取的字符串
						// 			var start = p * provideNumber // 开始截取的位置
						// 			var end = start + provideNumber // 结束截取的位置
						// 			// 此处特殊处理最后一行的索引值
						// 			if (p == rowNumber - 1) {
						// 				// 最后一次不换行
						// 				tempStr = params.substring(start, paramsNameNumber)
						// 			} else {
						// 				// 每一次拼接字符串并换行
						// 				tempStr = params.substring(start, end) + '\n'
						// 			}
						// 			newParamsName += tempStr // 最终拼成的字符串
						// 		}
						// 	} else {
						// 		// 将旧标签的值赋给新标签
						// 		newParamsName = params
						// 	}
						// 	//将最终的字符串返回
						// 	return newParamsName
						// },
					},
				},

				yAxis: [{
					type: 'value',
					name: unit,
					minInterval: 1,
					nameTextStyle: {
						color: '#C6F1F8',
						fontWeight: '400',
						fontSize: this.fontSize(14),
					},
					axisLine: {
						show: true,
						lineStyle: {
							color: '#3F4D4E',
						}
					},
					splitLine: {
						show: false,
						lineStyle: {
							color: '#3F4D4E',
						}
					},
					axisLabel: {
						color: '#C6F1F8',
						fontWeight: '400',
						fontSize: this.fontSize(14),
					},
				}
				],
				series: seriesData
			}
			this.chart.setOption(option, true);
		},
	},
}
</script>
